<template>
  <view v-if="dataObj">
    <!-- 轮播图 -->
    <u-swiper
      :list="bannerList"
      indicatorColor="#DDDDDD"
      :radius="0"
      indicatorActiveColor="#111111"
      height="440"
      circular
      indicator
    ></u-swiper>
    <view class="pad30">
      <view class="flex-align">
        <view style="width: 80%">
          <view class="bold f16">SALTS</view>
          <view class="color-info mt10 mb30">{{ dataObj.clothName }}</view>
        </view>
        <view style="width: 20%; text-align: right">
          <view class="f18">￥{{ dataObj.priceNew }}</view>
          <view class="color-info mt10 f18" style="text-decoration: line-through">￥{{ dataObj.pricePrimitive }}</view>
        </view>
      </view>
      <view class="color-info">{{ dataObj.comment }}</view>
    </view>
    <!-- <view class="flex-between flex-align pl30 pr30 color-row">
      <view>
        <view class="bold">颜色</view>
        <view class="mt6 f12 color-info">{{ dataObj.colors.length }}个颜色可选</view>
      </view>
      <view class="flex-align">
        <view class="color-con pad10 flex-center mr20" v-for="(item, idx) in dataObj.colors" :key="idx">
          <image :src="item.imgUrl" mode="scaleToFill" />
        </view>
        <u-icon name="arrow-right" color="#999" size="20"></u-icon>
      </view>
    </view>
    <view class="flex-between flex-align pl30 pr30 mt10 color-row">
      <view>
        <view class="bold">尺码</view>
        <view class="mt6 f12 color-info">{{ dataObj.specs.length }}个尺码可选</view>
      </view>
      <view class="flex-align">
        <view class="color-con pad10 flex-center mr20" v-for="(item, idx) in dataObj.specs" :key="idx">
          {{ item.spec }}
        </view>
       <u-icon name="arrow-right" color="#999" size="20"></u-icon>
      </view>
    </view> -->
    <!-- <view class="flex-align pad30 f12">
      尺码指南
      <image class="ml10" style="width: 17rpx; height: 17rpx" src="@/static/images/jt.png" mode="scaleToFill" />
    </view> -->
    <u-line></u-line>
    <view class="pad30 f16">商品详情</view>
    {{ dataObj.comment }}
    <table class="table">
      <tbody>
        <tr class="tr">
          <td class="td">面料</td>
          <td class="td">聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维聚酯纤维</td>
        </tr>
        <tr class="tr">
          <td class="td">里料</td>
          <td class="td">聚酯纤维</td>
        </tr>
        <tr class="tr">
          <td class="td">工艺</td>
          <td class="td">聚酯纤维</td>
        </tr>
        <tr class="tr">
          <td class="td">其他</td>
          <td class="td">聚酯纤维</td>
        </tr>
        <tr class="tr">
          <td class="td">其他</td>
          <td class="td">聚酯纤维</td>
        </tr>
      </tbody>
    </table>
    <view class="pad30 flex-align">
      <view class="color-primary f15">猜你喜欢</view>
      <view class="color-info f12 ml30">相关推荐</view>
    </view>
    <!-- 商品列表 -->
    <goodsList :list="goodsDataList" />
    <view class="btn-con flex-center pad30">
      <view class="btn flex-center" @tap="show = true">加入购物车</view>
    </view>
    <u-popup mode="bottom" :round="10" :show="show" @close="close">
      <view class="pad40">
        <view class="f16 bold flex-center mb30">加入购物车</view>
        <view class="flex-wrap flex-align pl30 pr30 color-row">
          <view>
            <view class="bold">颜色</view>
            <view class="mt6 f12 color-info">{{ dataObj.colors.length }}个颜色可选</view>
          </view>
          <view class="flex-align ml20">
            <view
              class="color-con pad10 flex-center mr20"
              :class="{ on: formData.color == item.color }"
              v-for="(item, idx) in dataObj.colors"
              :key="idx"
              @tap="formData.color = item.color"
            >
              <image :src="item.imgUrl" mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="flex-align flex-wrap pl30 pr30 mt10 color-row">
          <view>
            <view class="bold">尺码</view>
            <view class="mt6 f12 color-info">{{ dataObj.specs.length }}个尺码可选</view>
          </view>
          <view class="flex-align ml20">
            <view
              class="color-con pad10 flex-center mr20"
              :class="{ on: formData.spec == item.spec }"
              v-for="(item, idx) in dataObj.specs"
              :key="idx"
              @tap="formData.spec = item.spec"
            >
              {{ item.spec }}
            </view>
          </view>
        </view>
        <view class="mt20">
          <u-number-box v-model="formData.number"></u-number-box>
        </view>
        <view class="flex-center">
          <view class="btn flex-center mt40" @tap="addCart">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import homeApi from '@/api/homeApi'
import goodsList from '@/components/goodsList.vue'
import { reactive, ref } from 'vue'

const bannerList: any = ref([])

const formData: any = reactive({
  userId: uni.getStorageSync('userId'),
  clothId: '',
  spec: '',
  color: '',
  number: 1,
})

onLoad((e: any) => {
  formData.clothId = e.id
  getGoodsDetails()
  getHotGoods()
})

// 加入购物车
const addCart = () => {
  if (formData.colorId == '') {
    uni.showToast({ title: '请选择颜色', icon: 'none' })
    return
  }
  if (formData.specId == '') {
    uni.showToast({ title: '请选择规格', icon: 'none' })
    return
  }
  let data = JSON.parse(JSON.stringify(formData))
  homeApi.addCart(data).then((res: any) => {
    if (res.success) {
      uni.showToast({ title: '加入购物车成功', icon: 'none' })
      show.value = false
    }
  })
}

const show = ref(false)
const close = () => {
  show.value = false
}

const goodsDataList = ref([])
const getHotGoods = () => {
  homeApi
    .getHotGoods({
      userId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
    })
    .then((res: any) => {
      goodsDataList.value = res
    })
}

const dataObj: any = ref({})
const getGoodsDetails = () => {
  homeApi.getGoodsDetails({ clothId: formData.clothId }).then((res: any) => {
    dataObj.value = res
    bannerList.value = [res.imgUrl]
  })
}
</script>
<style>
page {
  padding-bottom: 140rpx;
}
</style>
<style lang="scss" scoped>
.btn {
  width: 80%;
  height: 80rpx;
  background-color: $uni-color-primary;
  color: #fff;
  border-radius: 30px;
}
.btn-con {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
}
.table {
  margin: 30rpx;
  width: 92%;

  .tr {
    display: flex;
  }

  .td {
    padding: 20rpx;
    border: 1px solid #eeeeee;
  }

  .td:nth-child(1) {
    width: 100rpx;
    text-align: center;
  }

  .td:nth-child(2) {
    width: 600rpx;
  }
}

.color-row {
  height: 120rpx;
  background-color: #f5f5f5;

  .color-con {
    width: 90rpx;
    height: 90rpx;
    background-color: #fff;
    border: 2px solid #fff;

    image {
      width: 72rpx;
      height: 72rpx;
    }
  }
  .on {
    border: 2px solid $uni-color-primary;
  }
}
</style>
